<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变换</title>
</head>
<body>
  <canvas id="drawing" width="200" height="200"></canvas>
  <script>
    const drawing = document.getElementById('drawing');

    // 确保浏览器支持 <canvas>
    if (drawing.getContext) {
      const context = drawing.getContext('2d');

      // 创建路径
      context.beginPath();

      // 绘制外圆
      context.arc(100, 100, 99, 0, 2 * Math.PI, false);

      // 绘制内圆
      context.moveTo(194, 100);
      context.arc(100, 100, 94, 0, 2 * Math.PI, false);

      // 移动原点到表盘中心
      context.translate(100, 100);

      // 旋转表针
      context.rotate(1);

      // 绘制分针
      context.moveTo(0, 0);
      context.lineTo(0, -85);

      // 绘制时针
      context.moveTo(0, 0);
      context.lineTo(-65, 0);

      // 描画路径(使路径在视图上显示)
      context.stroke();
    }
  </script>
</body>
</html>